<template>
  <div class="block">
    <el-timeline>

      <el-timeline-item  placement="top" :timestamp="userInfo.lastActiveTime">
        <el-card>
          <h4>最后活动时间 :  {{nowDate}}</h4>
          <p>{{ userInfo.realName+'在系统最后活动' }}</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item  placement="top" :timestamp="userInfo.createTime">
        <el-card>
          <h4>加入时间：{{userInfo.createTime}}</h4>
          <p>{{ userInfo.realName+'注册了系统' }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>

export default {
  data() {
    return {
      nowDate: "", // 当前日期
    };
  },
  methods: {
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    }
  },
  mounted() {
    this.currentTime();
  },
  beforeDestroy () {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {
          realName: '',
          lastActiveTime: '',
          createTime: ''
        }
      }
    }
  }
}

</script>
